<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件列表</title>
  <link rel="stylesheet" href="../css/element.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/file-list.css">
</head>

<body>
  <div id="app" class="app">
    <div class="file-list-container">
      <div class="tree-box">
        <el-tree :data="folderTree" :props="defaultProps" @node-click="handleNodeClick" highlight-current></el-tree>
        </el-tree>
      </div>
      <div class="table-box">
        <el-alert :title="title" type="success" :closable="false">
        </el-alert>
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
          style="margin: 10px 0;">导入</el-button>
        <el-button type="warning" plain icon="el-icon-back" size="mini" @click="back"
          style="margin: 10px 0;">返回D盘根目录</el-button>
        <div class="table">
          <el-table :data="fileList" style="width: 100%">
            <el-table-column label="序号" align="center" width="60">
              <template slot-scope="scope">
                {{(current - 1) * pageSize + scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名" width="180" align="center">
            </el-table-column>
            <el-table-column prop="type" label="类型" width="180" align="center">
            </el-table-column>
            <el-table-column prop="modifyDate" label="修改日期" sortable align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="page-container" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="current" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- ?targetPath=${this.parentPath}" -->
    <el-dialog title="上传文件" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"
      @closed="dialogClose">
      <el-upload class="upload-demo" drag :action="action" multiple :on-success="uploadSuccess" :on-error="uploadError"
        :file-list="uploadFileList">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/element.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="js/api/file.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      created() {
        // 页面一加载即获取D:/的文件列表 文件夹列表
        this.getFileList(this.parentPath)
        this.getFolderList()
      },
      computed: {
        title() {
          return `当前目录：${this.parentPath}`
        },
        // uploadPath+'?targetPath='+parentPath+'/'
        // 上传组件所需的上传路径
        action() {
          return `${this.uploadPath}?targetPath=${this.parentPath}/`
        }
      },
      data: {
        fileList: [],
        current: 1,
        pageSize: 50,
        total: 0,
        open: false,
        uploadFileList: [],
        defaultProps: {
          children: 'children',
          label: 'folderName'
        },
        folderTree: [],
        parentPath: 'D:/',
        // 上传请求的后端地址
        uploadPath: 'http://localhost:9000/upload'
      },
      methods: {
        handleDownload(row) {
          fileDownload(row.parentPath, row.fileName)
        },
        async getFileList(parentPath) {
          const { data } = await getFileList(this.current, this.pageSize, parentPath)
          this.fileList = data.data
          this.total = data.size
        },
        handleSizeChange() {

        },
        handleCurrentChange(e) {
          this.current = e
          this.getFileList(this.parentPath)
        },
        handleImport() {
          this.open = true
        },
        uploadSuccess(response, file, fileList) {
          // 提示用户上传成功
          this.$message({
            showClose: true,
            message: `上传到${this.parentPath}成功`,
            type: 'success'
          });
          this.uploadFileList = fileList
          this.getFileList(this.parentPath)
          this.open = false
          this.dialogClose()
        },
        // 文件上传失败时提示
        uploadError() {
          this.$message.error(`上传到${this.parentPath}失败，请排查`);
        },
        dialogClose() {
          this.uploadFileList = []
        },
        async getFolderList() {
          const { data } = await getFolderList(this.parentPath)
          this.folderTree = data.data
        },
        handleNodeClick(e) {
          this.parentPath = e.path
          this.current = 1
          this.getFileList(this.parentPath)
        },
        back() {
          this.parentPath = 'D:/'
          this.current = 1
          this.getFileList(this.parentPath)
          this.getFolderList()
        }
      }
    })
  </script>
</body>

</html>